
<script setup lang="ts">
	
	defineProps<{ 
		color?: string
		active?: boolean
	}>()
	
	
</script>

<script lang="ts">
	export default {
		options: { virtualHost: true }
	}
</script>

<template>
	<view class="wifi-symbol w-50 h-50 overflow-hidden" :class="{ active }" :style="{ color }">
		<view class="wifi-circle absolute round-full first w-5 h-5 bgc-white" />
		<view class="wifi-circle absolute round-full second w-25 h-25" />
		<view class="wifi-circle absolute round-full third w-40 h-40" />
	</view>
</template>

<style scoped lang="scss">
	.wifi-symbol {
	    box-sizing: border-box;
		$transform: rotate(135deg) translate3d(0, 0, 0) scale(.8);
	    transform: $transform;
	    -webkit-transform: $transform;
	    backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	}
	
	.wifi-circle {
	    border: 5rpx solid;
	}
	
	.first {
	    top: 45rpx;
	    left: 45rpx;
	}
	
	.second {
	    top: 35rpx;
	    left: 35rpx;
	}
	
	.third {
	    top: 25rpx;
	    left: 25rpx;
	}
	
	.active {
		opacity: 0.8;
		
		.second {
			animation: fadeInOut 1s infinite 0.2s;
			-webkit-animation: fadeInOut 1s infinite 0.2s;
		}
	
		.third {
			animation: fadeInOut 1s infinite 0.4s;
			-webkit-animation: fadeInOut 1s infinite 0.4s;
		}
	}
	
	@keyframes fadeInOut {
	    0%{opacity: 0}
	    100%{opacity: 1}
	}
</style>